Google Apps Script
Google Apps Script
本地開發
登入
$ npx @google/clasp login
基於clasp，再加入TypeScript、ESLint、測試環境、環境切換等功能
以Apache License 2.0授權釋出
安裝
$ npx @google/aside init
$ npm run deploy
$ npm run deploy:prod
$ npm run lint
測試
$ npm run test
需啟用Google Apps Script API
ViteSingleFile
$ npm install vite-plugin-singlefile --save-dev
$ npm i @types/google-apps-script --save-dev
code:vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { viteSingleFile} from 'vite-plugin-singlefile';
export default defineConfig({
build: {
outDir: "appsscript/client",
}
});
常用函式
處理GET請求
code:javascript
function doGet(e) {
const target = e.parameter.target;
getHandler(target);
}
處理POST請求
code:javascript
function doPost(e) {
const parameter = JSON.parse(e.postData.contents);
const target = parameter.target;
postHandler(target);
}
event.parameter和event.parameters傳入的內容結構不同
event.parameter：
event.parameters：
於操作時觸發函式
「Triggers」
「Add Trigger」
「Select event type」
「On edit」or「On change」
「Executions」
確認執行狀況
回傳資料的格式
字串
return ContentService.createTextOutput("回傳字串");
HTML
return HtmlService.createHtmlOutput(HTMLString);
JSON
code:javascript
const JSONString = JSON.stringify(result);
return ContentService.createTextOutput(JSONString).setMimeType(
ContentService.MimeType.JSON
);
讀取表單
SpreadsheetApp.getActiveSpreadsheet()
SpreadsheetApp.openById(SpreadSheetID)
Spreadsheet#getSheetByName(sheetName)
Spreadsheet#getSheets()[sheetIndex]
Sheet#getRange(row, column)
行與列起始座標值是1，不是0
Sheet#getRange(row, column, numRows)
Sheet#getRange(row, column, numRows, numColumns)
Sheet#getRange(cellRangeNotation)
getRange("A1:B2")
Range#getValues()
const values = sheet.getRange("A1:C2").getValues();
const values = sheet.getRange("A1:C2").getValues().flat();
Sheet#getSheetValues(startRow, startColumn, numRows, numColumns)
行與列座標起始值是1，不是0
寫入表單
Range
Range#setValues(values)
code:javascript
const rowLength = array.length;
const colLength = array0.length; sheet.getRange(1, 1, rowLength, colLength).setValues(array);
[[1, 2], [3, 4]]
UrlFetchApp.fetch(url[, params])
輸出網頁
Add a file→HTML→「Index.html」
code:Code.gs(javascript)
function doGet(e) {
// ...
return HtmlService.createHtmlOutputFromFile('Index');
}
傳送資料至網頁
code:Code.gs(javascript)
function doGet() {
var t = HtmlService.createTemplateFromFile('Index');
t.data = SpreadsheetApp
.openById('1234567890abcdefghijklmnopqrstuvwxyz')
.getActiveSheet()
.getDataRange()
.getValues();
return t.evaluate();
}
code:Index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<table>
<? for (var i = 0; i < data.length; i++) { ?>
<tr>
<? for (var j = 0; j < datai.length; j++) { ?> <? } ?>
</tr>
<? } ?>
</table>
</body>
</html>
從頁面呼叫GAS函式
頁面
code:html
<label class="badge badge-primary" for="input-field">Input field：</label>
<input type="text" id="input-field" name="input-field" />
<input type="button" onclick="callFromClient()" value="button" />
...
<script>
function callFromClient() {
// only call function
// google.script.run.test();
// get response from called function
google.script.run.withSuccessHandler(onSuccess).test();
}
function onSuccess(response) {
document.getElementById("input-field").value = response;
}
</script>
GAS
code:javascript
function test() {
return 'response from apps script side';
}
私有函式
名稱以_結尾的函式
無法透過google.script呼叫、無法從前端觀測
可透過網址請求即時取得QR Code圖片
https://chart.googleapis.com/chart?chs=450x450&cht=qr&chl=內容字串
此API已不再維護，隨時都可能無法再使用